<template>
  <el-form ref="ruleForm" :model="channelInfo" class="product-picture">
    <headline :headline="'商品图片'">
      <span slot="head"><el-button type="text" @click="advertisingGuidelines">点击查看《沃尔玛大卖场电商图片标准》</el-button></span>
    </headline>
    <div class="item">
      <div />
      <div><strong>商品主图</strong></div>
      <div><strong>透明图</strong></div>
    </div>

    <div class="item picture-row">
      <div />
      <el-form-item :prop="`${mainGraphList.mainGraph}`" :rules="[{ validator: mainGraphListVal, trigger: 'blur' }]">
        <!-- <div>主图</div> -->
        <picture-upload
          :is-disabled="isDisabled"
          :file-list="mainGraphList"
          :path="imagePath"
          :query-data="createQueryData({ key: 'resourceType', value: '1' })"
          :pic-number="6"
          :pic-size="3"
          :multiple="true"
          :type="mainGraphType"
          :url-name="'intraNetUrl'"
          :upload-data-key="uploadDataKey"
          :del-data-key="delDataKey"
          :del-fun="deleteSpuResource"
          :upload-fun="uploadSpuResource"
        />
      </el-form-item>
      <el-form-item :prop="`${mainGraphList.transparencyDrawing}`" :rules="[{ validator: transparencyDrawingListVal, trigger: 'blur' }]">
        <!-- <div>主图**********</div> -->
        <picture-upload
          :is-disabled="isDisabled"
          :file-list="transparencyDrawingList"
          :path="imagePath1"
          :query-data="createQueryData({ key: 'resourceType', value: '3' })"
          :pic-number="1"
          :pic-size="3"
          :type="transparencyDrawingType"
          :url-name="'intraNetUrl'"
          :upload-data-key="uploadDataKey"
          :del-data-key="delDataKey"
          :del-fun="deleteSpuResource"
          :upload-fun="uploadSpuResource"
        />
      </el-form-item>
    </div>

    <div v-if="channelInfo.spuSaleAttr.mainSaleAttr.mainSaleAttrValueList.length" class="item">
      <div />
      <div>
        <strong>{{ mainSaleAttrName }}图</strong>
      </div>
      <div><strong>透明图</strong></div>
    </div>
    <div v-for="(item, index) in channelInfo.spuSaleAttr.mainSaleAttr.mainSaleAttrValueList" :key="index" class="item picture-row">
      <div>{{ item.attrValueAlias }}</div>
      <el-form-item :prop="`spuSaleAttr.mainSaleAttr.mainSaleAttrValueList[${index}].mainGraph`" :rules="[{ validator: mainGraphListVal, trigger: 'blur' }]">
        <picture-upload
          :is-disabled="isDisabled"
          :file-list="item"
          :path="'mainGraph'"
          :query-data="createQueryData({ key: 'resourceType', value: '1' }, { key: 'omiAttrValueId', value: item.omiValueid })"
          :pic-number="6"
          :pic-size="3"
          :multiple="true"
          :type="mainGraphType"
          :url-name="'intraNetUrl'"
          :upload-data-key="arrtUploadDataKey"
          :del-data-key="delDataKey"
          :del-fun="deleteSaleAttrValueResource"
          :upload-fun="uploadSaleAttrValueResource"
        />
      </el-form-item>
      <el-form-item
        :prop="`spuSaleAttr.mainSaleAttr.mainSaleAttrValueList[${index}].transparencyDrawing`"
        :rules="[{ validator: transparencyDrawingListVal, trigger: 'blur' }]"
      >
        <picture-upload
          :is-disabled="isDisabled"
          :file-list="item"
          :path="'transparencyDrawing'"
          :query-data="createQueryData({ key: 'resourceType', value: '3' }, { key: 'omiAttrValueId', value: item.omiValueid })"
          :pic-number="1"
          :pic-size="3"
          :type="transparencyDrawingType"
          :url-name="'intraNetUrl'"
          :upload-data-key="arrtUploadDataKey"
          :del-data-key="delDataKey"
          :del-fun="deleteSaleAttrValueResource"
          :upload-fun="uploadSaleAttrValueResource"
        />
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
import headline from '@/views/coi/components/headline.vue'
import pictureUpload from '../../components/pictureUpload.vue'
import { CreateObject } from '@/utils/processingData.js'
import { uploadSpuResource, deleteSpuResource, uploadSaleAttrValueResource, deleteSaleAttrValueResource } from '@/api/coi/onlineTaskAPI/spu.js'
import {
  uploadSpuResource as uploadSpuResource_edit,
  deleteSpuResource as deleteSpuResource_edit,
  uploadSaleAttrValueResource as uploadSaleAttrValueResource_edit,
  deleteSaleAttrValueResource as deleteSaleAttrValueResource_edit
} from '@/api/coi/onlineTaskAPI/spuEdit.js'

export default {
  name: 'ProductPicture',
  components: {
    headline,
    pictureUpload
  },
  props: {
    channelInfo: {
      type: Object,
      required: true
    },
    mainSaleAttrName: {
      type: String,
      default: ''
    },
    isDisabled: {
      type: Boolean,
      default: true
    },
    increased: {
      type: Boolean,
      default: true
    }
  },
  data() {
    // console.log('this.', this.channelInfo)
    return {
      mainGraphList: {
        mainGraph: [],
        transparencyDrawing: []
      },
      transparencyDrawingList: {},
      uploadSpuResource: this.increased ? uploadSpuResource : uploadSpuResource_edit,
      deleteSpuResource: this.increased ? deleteSpuResource : deleteSpuResource_edit,
      uploadSaleAttrValueResource: this.increased ? uploadSaleAttrValueResource : uploadSaleAttrValueResource_edit,
      deleteSaleAttrValueResource: this.increased ? deleteSaleAttrValueResource : deleteSaleAttrValueResource_edit,
      arrtUploadDataKey: [
        { key: 'file', value: 'raw' },
        { key: this.increased ? 'spuId' : 'chgSpuId', value: 'spuId' },
        { key: 'resourceType', value: 'resourceType' },
        { key: 'omiValueId', value: 'omiAttrValueId' }
      ],
      uploadDataKey: [
        { key: 'file', value: 'raw' },
        { key: this.increased ? 'spuId' : 'chgSpuId', value: 'spuId' },
        { key: 'resourceType', value: 'resourceType' }
      ],
      delDataKey: [
        { key: 'omiAttrValueId', value: 'omiAttrValueId' },
        { key: 'resourceType', value: 'resourceType' },
        { key: this.increased ? 'spuId' : 'chgSpuId', value: 'spuId' },
        { key: 'url', value: 'intraNetUrl' }
      ],
      mainGraphListVal(rule, value, callback) {
        // console.log('valmainGraphvalue', value)
        // console.log('valmainGraphvalue', this.mainGraphList)
        if (value.length !== 6) callback(new Error('主图的数量不等于6张'))
        else callback('')
      },
      transparencyDrawingListVal(rule, value, callback) {
        console.log('valtransparencyDrawing', value)
        if (value.length !== 1) callback(new Error('透图的数量不等于1张'))
        else callback('')
      },
      mainGraphType: ['jpg', 'jpeg'],
      imagePath: '',
      imagePath1: '',
      transparencyDrawingType: ['png'],
      spuMainGraphList: {
        mainGraph: [],
        transparencyDrawing: []
      }
    }
  },
  watch: {
    mainGraphList: {
      handler(newValue, oldValue) {
        // console.log('newValue', newValue)
        // console.log('oldValue', oldValue)
        this.channelInfo.spuChannelResourceList = [...newValue.mainGraph, ...newValue.transparencyDrawing]
        // this.mainGraphList = newValue
      },
      deep: true
    }
  },
  mounted() {
    const { spuChannelResourceList } = this.channelInfo
    console.log('channelInfo***', this.channelInfo)
    const spuMainGraphList = {
      mainGraph: [],
      transparencyDrawing: []
    }
    spuChannelResourceList?.forEach((item) => {
      if (Number(item.resourceType) === 1) {
        spuMainGraphList.mainGraph.push(item)
      } else {
        if (Number(item.resourceType) === 3) spuMainGraphList.transparencyDrawing.push(item)
      }
    })
    // console.log('spuMainGraphList', spuMainGraphList)
    this.spuMainGraphList = spuMainGraphList
    this.mainGraphList = this.$route.query.menuName === 'JDWX' ? spuMainGraphList : spuMainGraphList
    // console.log('this.mainGraphList', this.mainGraphList)
    this.imagePath = this.$route.query.menuName === 'JDWX' ? 'mainGraph' : 'mainGraph'
    this.imagePath1 = this.$route.query.menuName === 'JDWX' ? 'transparencyDrawing' : 'transparencyDrawing'
    this.transparencyDrawingList = this.$route.query.menuName === 'JDWX' ? spuMainGraphList : spuMainGraphList
    // console.log('this.mainGraphList', this.mainGraphList)
    // console.log('this.imagePath', this.imagePath)
    // console.log('this.imagePath1', this.imagePath1)
  },
  methods: {
    createQueryData() {
      return new CreateObject({ key: 'spuId', value: this.$route.params.spuId }, ...arguments)
    },
    advertisingGuidelines() {
      const guideBaseUrl = window.appConfig.operationGuideUrl
      window.open(`${guideBaseUrl}/display/PDF/沃尔玛大卖场商品主图标准.pdf`)
    },
    submitForm() {
      let flag = null
      this.$refs.ruleForm.validate((valid) => {
        flag = valid
      })
      return flag
    }
  }
}
</script>

<style lang="scss" scoped>
.product-picture {
  .item {
    display: flex;
    padding: 0 10px;
    & > div {
      line-height: 40px;
      &:nth-child(1) {
        width: 100px;
        font-weight: 700;
        line-height: 16px;
        padding-right: 15px;
      }
      &:nth-child(2) {
        width: 700px;
      }
      &:nth-child(3) {
        flex: 1;
      }
    }
    &.picture-row {
      padding-top: 12px;
      border-bottom: 1px #eee double;
      &:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>
>
